<template>
  <div class="container">
    <!-- 添加额外的间距 -->
    <!-- <div style="margin-top: 5px;"></div> -->
    <!-- <h1 class="logo">问答信息展示</h1> -->
    <h1 class="title">问答记录展示</h1>
    <div class="search-container">
      <label for="searchType">搜索类型:</label>

      <select v-model="searchType" id="searchType">
        <option value="user">按用户查询</option>
        <option value="keyword">按问题关键词查询</option>
      </select>

      <div class="search-wrapper">
        
          <span class="search-icon"><el-icon size="19px" color="rgb(140,186,230)">
              <Search />
            </el-icon></span>
          <input v-if="searchType === 'user'" type="text" v-model="searchUser" placeholder="请输入用户账号">
          <input v-else type="text" v-model="searchKeyword" placeholder="请输入问题关键词">
        </div>
        <button @click="search" style="color: white;">搜索</button>
      </div>
      </div>
      <div class="scroll" id="scroll">
        <el-table :data="pagedQAList" style="width: 100%" :max-height="maxHeight"
          @selection-change="handleSelectionChange">

          <el-table-column prop="id" label="问答序号" align="center">
          </el-table-column>
          <el-table-column prop="user_id" label="用户账号" align="center"></el-table-column>
          <el-table-column prop="Q" label="问题" align="center"></el-table-column>
          <el-table-column prop="A" label="回答" align="center"></el-table-column>
          <el-table-column label="Operations" align="center">
            <template #default="{ row }">
              <el-button @click="deleteQA(row.id)" type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination :page-size="pageSize" :current-page="currentPage" :total="filteredQAList.length"
            @current-change="handlePageChange" layout="prev, pager, next"
            style="margin-top: 10px; text-align: center;"></el-pagination>
        </div>
      
    </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      qaList: [],
      searchType: 'user',
      searchUser: '',
      searchKeyword: '',
      filteredQAList: [],
      showWordCloud: false,
      pageSize: 20,
      currentPage: 1
    };
  },
  created() {
      //  axios.defaults.baseURL = 'http://127.0.0.1:8080';
       this.fetchAllRecord();

  },
  computed: {
    pagedQAList() {
      return this.filteredQAList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    async fetchAllRecord() {
      try {
        const response = await axios.get('/back/record/getAllRecord/');
        console.log(response.data);
        if (response.status === 200) {
          this.qaList = response.data
          this.filteredQAList = this.qaList;
          
        }
      } catch (error) {
        console.error('Error fetching records:', error);
      }
      
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
    async search() {
      try {
        let response;
        if (this.searchType === 'user') {
          response = await axios.get('/back/record/getQandAByUserId/', {
            params: { user_id: this.searchUser }
          });
          console.log(response.data);
        } else {
          response = await axios.get('/back/record/getQByKeyWord/', {
            params: { word: this.searchKeyword }
          });
          console.log(response.data);
        }
        if (response.status === 200) {
          this.filteredQAList = response.data;


        }
      } catch (error) {
        console.error('Error searching records:', error);
      }
      this.showWordCloud = false;
    },
    async deleteQA(id) {
      if (confirm("确定要删除这条问答信息吗？")) {
        try {
          const response = await axios.get('/back/record/deleteRecord', {
            params: { id: id }
          });
          console.log(id);
          if (response.status === 200) {
            this.fetchAllRecord(); // 重新加载所有记录
          }
        } catch (error) {
          console.error('Error deleting record:', error);
        }
      }
    },
    showStatistics() {
      // 显示词云图
      this.showWordCloud = true;
      this.drawWordCloud();
    },
    drawWordCloud() {
  const words = this.qaList.map(qa => ({ name: qa.question, value: Math.random() * 100 })); // 根据问题生成词云数据

  const option = {
    series: [{
      type: 'wordCloud',
      gridSize: 2,
      sizeRange: [12, 50],
      rotationRange: [-90, 90],
      shape: 'pentagon',
      width: '100%',
      height: '100%',
      textStyle: {
        normal: {
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        }
      },
      data: words
    }]
  };

  const wordCloud = echarts.init(document.getElementById('wordCloud'));
  wordCloud.setOption(option);
},
  }
};
</script>

<style scoped>
/* 这里可以添加组件的样式 */
th:nth-child(4),
td:nth-child(4) {
  width: 40%; /* 或者您可以根据需要调整具体的宽度 */
}
th:nth-child(1),
td:nth-child(1) {
  width: 10%; /* 或者您可以根据需要调整具体的宽度 */
}
th:nth-child(2),
td:nth-child(2) {
  width: 15%; /* 或者您可以根据需要调整具体的宽度 */
}
th:nth-child(5),
td:nth-child(5) {
  width: 10%; /* 或者您可以根据需要调整具体的宽度 */
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.search-container {
  margin-bottom: 20px;
  height: 60px; /* Increase the height */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
  /* justify-content: space-between;  */
}

.search-container label {
  font-weight: bold; /* 加粗搜索类型文字 */
}


.search-container select {
  padding-left: 10px; /* 去除左侧空白 */
  padding-right: 0; /* 去除左侧空白 */
  /* 其他样式属性 */
  height: 30px; /* Adjust the height of input/select elements */
  font-size: 16px; /* Increase font size */
  margin-left: 3px;
  border-radius: 8px; /* 添加圆角 */
  border: 1px solid #ccc; /* 修改边框颜色 */
  background-color: #d8e4eb16; /* 修改输入框背景色 */
  /* background-color: #17172116;  */
}
.search-container input[type="text"] {
  padding-left: 30px; /* 留出图标的位置 */
  height: 32px; /* Adjust the height of input/select elements */
  font-size: 16px; /* Increase font size */
  margin-left: 3px;
  border-radius: 5px; /* 添加圆角 */
  border: 1px solid #ccc; /* 修改边框颜色 */
  background-color: #d1dbe116; /* 修改输入框背景色 */
  margin-left: 20px;
}

.search-container input[type="text"]:focus {
  border: 1px solid #ccc; /* 修改边框颜色 */
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* 深蓝色边框，透明度为0.5 */
}


.el-pagination {
  margin-top: 20px;
}

.search-container button {  
  padding: 8px 10px; /* Adjust button padding */  
  background-color: #156AA8;  
  color: white;  
  border: 0.5px solid #afbcca; /* Add a 1px black border */   
  cursor: pointer;  
  margin-left: 5px; /* Narrower spacing */  
  border-radius: 5px; /* Add rounded corners */   
  font-size: 12px;  
  /* height: 28px;  */
  line-height: 15px; /* Set line-height to the same as height (minus padding and border) */  
  text-align: center; /* Ensure text is horizontally centered (default for buttons) */  
}
.search-container button:hover {
  background-color: #156ba8da;
}

table {  
  width: 100%;  
  border-collapse: collapse; /* 合并边框 */  
  /* 移除表格本身的边框，因为我们只想要横向边框 */  
  border: none;  
}  
  
/* 设置行（tr）的底部边框，这将形成表格的横向边框 */  
table tr {  
  border-bottom: 0.5px solid #c1cfdc; /* 细一点的蓝灰色边框 */  /* 你可以使用任何你想要的颜色和粗细 */  
}  
  
/* 移除最后一个行（tr）的底部边框，以避免额外的边框 */  
/* table tr:last-child {  
  border-bottom: none;  
}   */
  
/* 清除单元格的边框，因为它们会由行边框形成 */  
table td, table th {  
  border: none;  
  padding: 10px; /* 添加填充以模拟边框之间的间距 */  
}  
  
/* （可选）如果你想要表头（th）的边框与行边框不同，可以单独设置 */  
/* table th {  
  border-bottom: 2px solid #333; }*/
th, td {  
  /* border: 1px solid #ddd;   */
  padding: 8px;  
  text-align: left; 
  height: 15px;
  font-size: 14px; /* 增加字体大小 */  
  /* 为每个单元格指定具体的宽度，或者使用百分比 */  
  width: 25%; /* 假设你有4列，每列宽度为25% */  
  /* 注意：高度通常不需要指定，它会自动根据内容调整 */  
}  
  
th {  
  background-color: #ecf0f12f;  

  /* 如果需要，可以为表头指定不同的宽度 */  
}  
  
/* 如果单元格内容可能非常长而不换行，  
   可以使用 white-space 属性来指定如何处理多余的空间 */  
td {  
  /* 允许内容在需要时换行 */  
  white-space: normal; /* 默认就是 normal */  
  /* 或者如果你想防止内容换行并隐藏溢出部分，可以这样设置 */  
  /* white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis; */  
}
button {
  color: #256aa7c9;
  background-color: #fff;
  border-color: #fff;
}
button:hover {
  color: #ca3f3f;
  background-color: #f3f4f503;
  border-color: #fff;
}

.search-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 10px; /* 调整图标的位置 */
  top: 50%;
  transform: translateY(-50%);
  color: #66666602; /* 调整图标颜色 */
}

.search-icon i {
  font-size: 16px; /* 调整图标大小 */
  margin-left: 20px;
}

.table-container {
  width: 100%; /* Make the table full width */
  overflow-x: auto; /* Add horizontal scroll if needed */
}
.table-container table {
  width: 100%; /* Make the table full width */
  border-collapse: collapse; /* Collapse borders */
}

.table-container th,
.table-container td {
  padding: 8px; /* Add padding */
  border: 1px solid #ddd; /* Add borders */
  text-align: left; /* Align text to the left */
}

.table-container th {
  background-color: #f2f2f2; /* Add background color */
  color: #333; /* Change text color */
}
.word-cloud-container {
  width: 70%; /* Set the width to 70% */
  float: right; /* Float to the right */
  padding-left: 20px; /* Add some left padding */
}

/* Adjust the height of the word cloud container as needed */
#wordCloud {
  height: 400px;
}

.scroll {
    width: 100%;
  }

.pagination-container {  
  display: flex;  
  justify-content: center;  
  align-items: center; /* 如果需要垂直居中也可以添加 */  
  margin-top: 10px;  
  /* 其他你需要的样式 */  
}  
.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

</style>